import React from "react";
import {connect} from "react-redux";
import {
    PageDetailHeader_Header as Header,
    PageDetailHeader_Row as Row,
    PageDetailHeader_RowItem as RowItem,
    PageDetailHeaderContainer as Container, ShadowBackground
} from "./style";
import Config from "@/config";
import {Avatar} from "antd";
import {ClockCircleOutlined, EyeFilled, HeartOutlined} from "@ant-design/icons";
import moment from "moment";

const PageDetailHeader = (props) => {

    const isRecommend = props.isRecommend;
    const detail = props.data;
    const style = props.style;
    return <>
        <Container style={style} photoUrl={detail.photoUrl}>
            <ShadowBackground>
            <Header>
                {
                    isRecommend ? <>
                        <Config.IconFont type={'icon-remaituijian'} style={{marginRight: '10px', fontSize: '22px'}}/>
                    </> : null
                }
                {
                    detail.pageTitle
                }
            </Header>
            <Row>
                {/* 第一部分： 作者的头像 */}
                <RowItem style={{width: 'auto'}}>
                    <Avatar
                        style={{userSelect: "none", marginRight: '5px'}}
                        src={detail.authorImage}
                        size={{xs: 22, sm: 22, md: 22, lg: 22, xl: 22, xxl: 22}}>
                        {detail.authorName}
                    </Avatar>
                </RowItem>
                {/* 第二部分： 作者的昵称 */}
                <RowItem style={{lineHeight: '29px', width: 'auto', marginLeft: '5px', fontSize: '12px'}}>
                    作者：
                    {
                        detail.authorName
                    }
                </RowItem>
                {/* 第三部分：文章分类 */}
                <RowItem style={{lineHeight: '29px', width: 'auto', marginLeft: '20px', fontSize: '12px'}}>
                    类别：
                    {
                        detail.categoryName
                    }
                </RowItem>
                {/* 第三部分：文章上传时间 */}
                <RowItem style={{lineHeight: '29px', width: 'auto', marginLeft: '20px', fontSize: '12px'}}>
                    <ClockCircleOutlined style={{marginRight: '5px'}}/>
                    {
                        moment(detail.uploadTime).fromNow()
                    }
                </RowItem>
                {/* 第四部分：观看数量 */}
                <RowItem style={{lineHeight: '29px', width: 'auto', marginLeft: '20px', fontSize: '12px'}}>
                    <EyeFilled style={{marginRight: '10px'}}/>
                    {
                        detail.watchCount
                    }
                </RowItem>
                {/* 第五部分：点赞数量 */}
                <RowItem style={{lineHeight: '29px', width: 'auto', marginLeft: '20px', fontSize: '12px'}}>
                    <HeartOutlined style={{marginRight: '10px'}}/>
                    {
                        detail.likeCount
                    }
                </RowItem>
                {/* 第五部分：点赞数量 */}
                <RowItem style={{lineHeight: '29px', width: 'auto', marginLeft: '20px', fontSize: '12px'}}>
                    {
                        detail.updateDate ? "已被重新编辑于" + moment(detail.editTime).fromNow() : null
                    }
                </RowItem>
            </Row>
            </ShadowBackground>
        </Container>
    </>

}

const mapDispatchToProps = (dispatch) => {
    return {}
}

/* 这里不自己引State，选择复用父组件。 */
export default connect(null, mapDispatchToProps)(PageDetailHeader);
